﻿@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<script src="@Url.Content("~/Scripts/portrait_edit.js")" type="text/javascript"></script>

<form id="frm" method="post" action="Save">
    @RenderBody()

    <input id="headId" name="headId" type="hidden" />
    <input id="eyesId" name="eyesId" type="hidden" />
    <input id="noseId" name="noseId" type="hidden" />
    <input id="mouthId" name="mouthId" type="hidden" />

    <div>
        <div class="SectionNavigation">
            <div class="SectionTabAll SectionTabSelected">Create a character</div>
            <div class="SectionTabAll SectionTab"><a href="Index">View Characters</a></div>
            <div class="SectionTabAll SectionTab"><a href="../Content/Index">Story Creator</a></div>
        </div>
        <div class="ContentBorder CharacterImage">
            <div class="FullSizeImage"><svg></svg></div>
            <div class="LinkButton"><a href="javascript: submitSave()">Save</a></div>
        </div>
        <div class="FeatureSelector">
            <div class="FeatureTabEnabled FeatureTabAll"><img src="../Images/head_image.png" onclick="updateAvailableFeatures(4, 0, 16, this)"/></div>
            <div class="FeatureTab FeatureTabAll" id="eyesFeature"><img src="../Images/eyes_image.png" onclick="updateAvailableFeatures(1, 0, 16, this)"/></div>
            <div class="FeatureTab FeatureTabAll" id="noseFeature"><img src="../Images/nose_image.png" onclick="updateAvailableFeatures(2, 0, 16, this)"/></div>
            <div class="FeatureTab FeatureTabAll" id="mouthFeature"><img src="../Images/mouth_image.png" onclick="updateAvailableFeatures(3, 0, 16, this)"/></div>
        </div>
        <div class="SelectableImageContainer">
            <span class="SelectableImage"><svg></svg></span>
            <span class="SelectableImage"><svg /></span>
            <span class="SelectableImage"><svg /></span>
            <span class="SelectableImage"><svg /></span>
            <span class="SelectableImage"><svg /></span>
            <span class="SelectableImage"><svg /></span>
            <span class="SelectableImage"><svg /></span>
            <span class="SelectableImage"><svg /></span>
            <span class="SelectableImage"><svg /></span>
            <span class="SelectableImage"><svg /></span>
            <span class="SelectableImage"><svg /></span>
            <span class="SelectableImage"><svg /></span>
            <span class="SelectableImage"><svg /></span>
            <span class="SelectableImage"><svg /></span>
            <span class="SelectableImage"><svg /></span>
            <span class="SelectableImage"><svg /></span>

            <div style="float:left;">
                <div id="ColorBar">
                </div>
                <br style="clear:both;"/>
                <div id="ColorBarSecondary">
                </div>
            </div>
        </div>
        <div>
            <span class="BackNavigation" onclick="backPage()">&nbsp;</span>
            <span class="ForwardNavigation" onclick="forwardPage()">&nbsp;</span>
        </div>
    </div>
</form>